<html>

<head>
    <script type="text/javascript" src="achart.js"></script>
    <script type="application/javascript">
        function ready() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                demo(canvas, ctx);
            }
        }
        function demo(canvas, ctx) {
            let dot = { x: 500, y: 500 };
            let xStep = 10;
            let yStep = 10;
            let xAxisLen = canvas.width;
            let yAxisLen = canvas.height;
            let smallScaleHeight = 2;
            let scaleHeight = 5;
            ctx.beginPath();
            ctx.moveTo(0, dot.y);
            ctx.lineTo(xAxisLen, dot.y);
            ctx.moveTo(dot.x, 0);
            ctx.lineTo(dot.x, yAxisLen);

            ctx.fillText(0, dot.x + 5, dot.y - 5);
            for (const sign of [1, -1]) {
                for (let i = 1; ; i++) {
                    let inc = sign * i * xStep;
                    let x = dot.x + inc;
                    let y = dot.y;
                    if (x > canvas.width || x < 0) {
                        break;
                    }
                    ctx.moveTo(x, y);
                    if (i % 10 == 0) {
                        y = dot.y - scaleHeight;
                        ctx.fillText(inc, x - xStep, y - 10);
                    } else {
                        y = dot.y - smallScaleHeight;
                    }
                    ctx.lineTo(x, y);
                }
            }

            for (const sign of [1, -1]) {
                for (let i = 1; ; i++) {
                    let inc = sign * i * yStep;
                    let y = dot.y + inc;
                    let x = dot.x;
                    if (y > canvas.height || y < 0) {
                        break;
                    }
                    ctx.moveTo(x, y);
                    if (i % 10 == 0) {
                        x = dot.x + scaleHeight;
                        ctx.fillText(0 - inc, x + 5, y + 5);
                    } else {
                        x = dot.x + smallScaleHeight;
                    }
                    ctx.lineTo(x, y);
                }
            }
            let start = { x: 200, y: 300 }
            let end = { x: 400, y: 400 }
            let dx = end.x - start.x;
            let dy = end.y - start.y;
            let a = Math.atan(dx / dy) - Math.PI / 6;
            let b = Math.atan(dx / dy) + Math.PI / 6;
            let arrowLen = 10;
            let dot1 = {
                x: end.x - arrowLen * Math.sin(a),
                y: end.y - arrowLen * Math.cos(a),
            }
            let dot2 = {
                x: end.x - arrowLen * Math.sin(b),
                y: end.y - arrowLen * Math.cos(b),
            }
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(end.x, end.y);
            ctx.lineTo(dot1.x, dot1.y);
            ctx.moveTo(end.x, end.y);
            ctx.lineTo(dot2.x, dot2.y);

            ctx.stroke();
            ctx.closePath();
        }
    </script>
</head>

<body onload="ready();">
    <canvas id="canvas" width='1366' height='720' style=" border: 1px solid black;"></canvas>
</body>

</html>